<!-- test01-第一次作业 完成一个动画效果:
 一个宽高为50px*50px 的矩形方块,在一个宽1000px,高500px的区域内,以其左上角为起点,在区域内以'W'路线进行移动，无限循环。
 要求1000px*500px的区域居中显示-->
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
     <style>
       #two {
         position:relative;
         width: 1000px;
         height: 500px;
         background-color: bisque;
       }
       
       #one {
        position: absolute;
         left: 0px;
         width: 50px;
         height: 50px;
         background-color: crimson;
         animation-name: Kenneth;
         animation-duration: 4s;
         animation-delay: 1s;
         animation-timing-function: easy;
         animation-iteration-count: infinite;
         animation-direction: normal;
         animation-play-state: running;
       }
       @keyframes Kenneth {
         0% {
           top: 0px;
           left: 0px;
         }
         25% {
           top: 450px;
           left: 200px;
         }
         50% {
           top: 0px;
           left: 450px;
         }
         75% {
           top: 450px;
           left: 700px;
         }
         100% {
           top: 0px;
           left: 950px;
         }
       }
     </style>
   </head>
   <body>
    <center>
        <div>
     <div id="two">
       <div id="one"></div>
     </div>
    </div>
      </center>
   </body>
 </html>